<template>
    <div style="margin: 8px;">
        <el-skeleton animated :rows="8" :loading="data.isFisrt">
            <el-descriptions border title="套餐详情" direction="vertical" column="2">
                <template #extra>
                    <div v-if="!data.isEdit">
                        <el-button @click="event.edit" type="primary" round>编辑</el-button>
                    </div>
                    <div v-else>
                        <el-popconfirm @confirm="event.save" title="确认要保存吗？">
                            <template #reference>
                                <el-button type="primary" round>保存</el-button>
                            </template>
                        </el-popconfirm>
                    </div>
                </template>
                <el-descriptions-item label="套餐名称*" width="33%">

                    <template v-if="!data.isEdit">
                        <el-tag size="large"> {{ data.data.pname }}</el-tag>
                    </template>
                    <el-input v-else type="text" v-model="data.data.pname">
                    </el-input>
                </el-descriptions-item>

                <el-descriptions-item label="套餐内容*" width="33%">
                    <template v-for="item in data.data.proname" :key="item">
                        <el-tag size="large"> {{ item }}</el-tag>
                    </template>
                </el-descriptions-item>
                <el-descriptions-item label="套餐总价*" width="33%">

                    <template v-if="!data.isEdit">
                        <el-tag size="large"> {{ data.data.totalprice }}元</el-tag>
                    </template>
                    <el-input-number v-else type="text" v-model="data.data.totalprice">
                    </el-input-number>
                </el-descriptions-item>

                <el-descriptions-item label="套餐数量(0为不限量)*" width="33%">

                    <template v-if="!data.isEdit">
                        <el-tag size="large"> {{ data.data.count==0?'不限量':data.data.count }}</el-tag>
                    </template>
                    <el-input-number v-else type="text" v-model="data.data.count">
                    </el-input-number>

                </el-descriptions-item>

                <el-descriptions-item label="服务时长*" width="33%">

                    <template v-if="!data.isEdit">
                        <el-tag size="large"> {{ data.data.duration }}(分钟)</el-tag>
                    </template>
                    <el-input-number v-else type="text" v-model="data.data.duration">
                    </el-input-number>
                </el-descriptions-item>


                <el-descriptions-item label="开始时间*" :span="1">
                    <el-tag size="large"> {{ data.data.begintime }}</el-tag>
                </el-descriptions-item>

                <el-descriptions-item label="结束时间*" :span="1">

                    <template v-if="!data.isEdit">
                        <el-tag size="large"> {{ data.data.endtime }}</el-tag>
                    </template>
                    <el-date-picker v-else v-model="data.request.endtime" type="date" placeholder="结束时间"
                        style="width: 100%" />

                </el-descriptions-item>
                <el-descriptions-item label="套餐描述*" :span="1">

                    <template v-if="!data.isEdit">
                        <el-tag size="large"> {{ data.data.explain }}</el-tag>
                    </template>
                    <el-input v-else type="textarea" v-model="data.data.explain">
                    </el-input>

                </el-descriptions-item>
            </el-descriptions>
        </el-skeleton>

    </div>
</template>

<script setup lang="ts">
import { Get_Package_Detail, Update_Package } from '@/api/product/package';
import type package_Dto from '@/Dto/Request/product/package';
import Api_Code from '@/Dto/Response/Api_code';
import { closeloading, startloading } from '@/utils/loading';
import { msg } from '@/utils/msg';
import dayjs from 'dayjs';
import { el } from 'element-plus/es/locales.mjs';
import { onMounted, reactive } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();

const data = reactive<package_Dto>({
    isFisrt: true,
    isEdit: false,
    data: [],
    request:{
        endtime:''
    }
})

const event = {
    edit() {
        data.isEdit = true
    },
   async save() {
            startloading()
         const res=await Update_Package({
            id:route.params.id.toString(),
            name:data.data.pname,
            endtime:dayjs(data.data.endtime).format('YYYY-MM-DD'),
            total_price:data.data.totalprice.toString(),
            stock:data.data.count,
            explain:data.data.explain,
            duration:data.data.duration
         })
         if(res.code===Api_Code.ok){
            closeloading()
            msg(res)
            data.isEdit=false
            
         }
         msg(res)
    }
}

const methods = {


    async bind() {
        const res = await Get_Package_Detail({
            id: route.params.id.toString()
        })
        if (res.code === Api_Code.ok) {
            data.data = res.data[0]
            data.isFisrt = false
            console.log(data.data, "::::::::::::")
        }
    }
}

onMounted(async () => {
    await methods.bind();

})

</script>

<style scoped></style>